<template>
  <div id="map-container" class="app-container wh-full">
    <!-- <div class="filter-panel">
      <el-card class="w-full filter-panel-card">
        <el-collapse>
          <el-collapse-item title="快速定位" name="1">
            <el-form>
              <el-form-item label="姓名">
                <el-input clearable placeholder="搜索改造客户姓名、身份证、手机号" />
              </el-form-item>

              <div class="flex-x-center">
                <div class="flex-1" />
                <el-button type="primary">确定</el-button>
              </div>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div> -->

    <DialogHouseDetail ref="dialogHouseDetailRef" />
  </div>
</template>
<script setup lang="ts">
import UserAPI from "@/api/user";
import DialogHouseDetail from "@/components/dialog-house-detail/dialog-house-detail.vue";
import { AMapManager } from "@/utils/AMapManager";

const dialogHouseDetailRef = ref();
const mapLabelIcon = "http://rs-image.jiangkaikeji.com/94391737342622_.pic.jpg";
let userMapData: any[] = [];
let manManager: AMapManager;

defineOptions({
  name: "MapIndex",
});

onMounted(() => {
  Promise.all([fetchData(), viewMap()]).then(() => {
    addMarkers();
  });
});

onUnmounted(() => {
  manManager.destroy();
});

/**
 * @description 获取地图部分数据
 */
async function fetchData() {
  userMapData = await UserAPI.mapData();
}

/**
 * @description 初始化高德地图
 */
async function viewMap() {
  manManager = new AMapManager({
    elementId: "map-container",
    zoom: 14,
    center: [113.882147, 27.643721],
    plugins: ["AMap.ToolBar", "AMap.ControlBar", "AMap.Geolocation"],
  });
  await manManager.init();
}

/**
 * @description 绘制地址标注点
 */
function addMarkers(): void {
  if (userMapData.length === 0) return;
  const labels = manManager.addLabelMarker(userMapData, mapLabelIcon);
  // 给标记添加事件
  labels.forEach((label: any) => {
    label.on("click", handleMarkerClick);
  });
}

/**
 * @description 处理标记点击事件
 * @param e
 */
function handleMarkerClick(e: any) {
  const userId = e.target._opts.extData.id;
  dialogHouseDetailRef.value.open(userId);
}
</script>

<style lang="scss" scoped>
:deep(.filter-panel-card) {
  border: 1px solid #ccc;

  .el-card__body {
    padding: 0 12px;
  }
}

#map-container {
  position: relative;

  .filter-panel {
    width: 300px;
    position: absolute;
    z-index: 99;
  }
}
</style>
